<html>
<head>
    <title>运维管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F2F2F2;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .page-top {
            margin: 30px 0 0px 30px;

        }
    </style>
</head>
<body>
<div class="page" id="page-elesafe">

    <div class="page-title">运维管理 › 工单管理</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree v-on:click-node="userNode" :tabsign="'p'"></dev-tree>
            </el-col>
            <el-col :span="20" style="    background: #ffffff;">
                <el-form :inline="true" class="page-top">
                    <el-form-item>
                        <el-select v-model="param.wf_objType" placeholder="工单类型" style="width: 120px;">
                            <el-option label="告警" value="5"></el-option>
                            <el-option label="巡检" value="6"></el-option>
                            <el-option label="维修" value="7"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="param.wf_processflag" placeholder="工单状态" style="width: 120px;">
                            <el-option label="未处理" value="0"></el-option>
                            <el-option label="处理" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="day"
                                type="month"
                                placeholder="选择月" style="width: 120px;">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-tooltip effect="dark" content="请点击左边树中项目" v-model="tooltip" placement="right">
                            <el-button @click="seoBtn" type="primary">搜索</el-button>
                        </el-tooltip>
                    </el-form-item>
                </el-form>


                <el-table border stripe style="width: 100%" :data="tabData">
                    <el-table-column prop="wf_eventName" label="工单名称" align="center">
                    </el-table-column>
                    <el-table-column prop="wf_objType" label="工单类型" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.wf_objType == '5'">
                                <el-tag size="medium" type="success">告警</el-tag>
                            </div>
                            <div v-else-if="scope.row.wf_objType == '6'">
                                <el-tag size="medium" type="success">巡检</el-tag>
                            </div>
                            <div v-else-if="scope.row.wf_objType == '7'">
                                <el-tag size="medium" type="success">维修</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fromName" label="工单发出人" align="center">
                    </el-table-column>
                    <el-table-column prop="toName" label="工单接收人" align="center">
                    </el-table-column>
                    <el-table-column prop="wf_createtime" label="派单时间" align="center">
                    </el-table-column>
                    <el-table-column prop="wf_processflag" label="工单处理状态" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.wf_processflag == '2'">
                                <el-tag size="medium">处理</el-tag>
                            </div>
                            <div v-else-if="scope.row.wf_processflag == '0'">
                                <el-tag size="medium">未处理</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wf_processtime" label="完成时间" align="center">
                    </el-table-column>
                    <el-table-column label="操作" width="300px" align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" round size="mini" icon="el-icon-edit"
                                       v-if="scope.row.wf_processflag == '0'">处理
                            </el-button>
                            <el-button @click="showDetail(scope.row)" round size="mini" icon="el-icon-share"
                                       v-if="scope.row.wf_processflag == '2'">明细
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <el-dialog title="工单处理" :visible.sync="dialogFormVisible" :show-close="false">
            <el-form :model="form">
                <el-col :span="12">
                    <el-form-item label="工单名称" :label-width="formLabelWidth">
                        <el-input v-model="form.wf_eventName" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工单类型" :label-width="formLabelWidth">
                        <el-input v-model="form.wf_objType" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工单发出人" :label-width="formLabelWidth">
                        <el-input v-model="form.fromName" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工单接收人" :label-width="formLabelWidth">
                        <el-input v-model="form.toName" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>

                <el-form-item label="原因分析" :label-width="formLabelWidth">

                    <el-input v-model="form.wf_processmsg" autocomplete="off"></el-input>

                </el-form-item>

                <el-form-item label="处理过程" :label-width="formLabelWidth">

                    <el-input v-model="form.wf_reason" autocomplete="off"></el-input>

                </el-form-item>
                <el-form-item label="图片上传" :label-width="formLabelWidth">
                    <el-upload
                            class="upload-demo"
                            drag
                            ref="upload"
                            action="http://iot.hzcando.com/api/idm/v1/process"
                            :auto-upload="false"
                            :headers="headers"
                            name="img"
                            :data="uploadData"
                            limit="1">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传一张jpg/png文件，</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitClick">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="处理明细" :visible.sync="detailFormVisible" :show-close="false">
            <el-form :model="form">
                <el-col :span="12">
                    <el-form-item label="工单名称" :label-width="formLabelWidth">
                        <el-input v-model="form.wf_eventName" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工单类型" :label-width="formLabelWidth">
                        <el-input v-model="form.wf_objType" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>


                <el-col :span="12">
                    <el-form-item label="工单发出人" :label-width="formLabelWidth">
                        <el-input v-model="form.fromName" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工单接收人" :label-width="formLabelWidth">
                        <el-input v-model="form.toName" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>

                <el-form-item label="原因分析" :label-width="formLabelWidth">

                    <el-input v-model="form.wf_processmsg" autocomplete="off" disabled></el-input>

                </el-form-item>

                <el-form-item label="处理过程" :label-width="formLabelWidth">

                    <el-input v-model="form.wf_reason" autocomplete="off" disabled></el-input>

                </el-form-item>
                <el-form-item label="现场图片" :label-width="formLabelWidth">

                    <el-image :src="form.img" style="width: 80%; height: 120px" fit="contain">
                    </el-image>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDetail">确定</el-button>
            </div>
        </el-dialog>
    </div>
    <div class="page-footer">
        <el-pagination background layout="prev, pager, next" :pagesize="param.pagesize" :total="totalCount"
                       :current-page.sync="param.pageno" @current-change="onChangePage">
        </el-pagination>
    </div>
</div>


<!-- import Vue before Element -->
<script src="../../../assets/bundle.js"></script>
<!-- import JavaScript -->
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>
    let loading;
    var vuePage = new Vue({
        el: '#page-elesafe',
        data: {
            formLabelWidth: '120px',
            day: '',
            currentPage: 1,
            tabData: [],
            dialogFormVisible: false,
            detailFormVisible: false,
            form: {},
            headers: {
                uid: '',
                token: '',
            },
            uploadData: {},
            param: {
                pagesize: 10,
                pageno: 1,
                wf_processflag: '',
                wf_objType: '',
                wf_businesstype: '',
                wf_projectNo: '',
            },
            totalCount: 0,
            tooltip: false,
            day: '',
        },
        methods: {
            userNode: function (data) {

                if (data.id.indexOf('P') == -1) {
                    return;
                }
                this.param.wf_projectNo = data.attributes.projectNo;
                this.getWorkFlow();
            },
            seoBtn: function () {
                this.getWorkFlow();
            },
            aa: function (data) {
            },
            addBtn: function () {
                this.dialogFormVisible = true;
            },
            cancelClick() {
                this.dialogFormVisible = false;
            },
            cancelDetail() {
                this.detailFormVisible = false;
                this.form = {};
            },
            submitClick(formName) {
                this.uploadData.wf_processmsg = this.form.wf_processmsg;
                this.uploadData.wf_reason = this.form.wf_reason;
                this.uploadData.wf_to = this.form.wf_to;
                this.uploadData.wf_objType = this.form.wf_objType;
                this.uploadData.wf_objid = this.form.wf_objid;
                if (this.$refs.upload.fileList.length == 0) {
                    this.$message({
                        type: 'info',
                        message: '必须选择图片'
                    });
                    return;
                }
                this.$refs.upload.submit();
                this.$refs.upload.clearFiles();
            },
            handleClick(row) {
                this.dialogFormVisible = true;
                this.form = row;
            },
            onChangePage(page) {
                this.param.pageno = page;
                this.getWorkFlow();
            },
            getWorkFlow() {
                // let dArr = this.day.split('-');
                // this.param.year = dArr[0];
                // this.param.day = dArr[1];
                const d = new Date(this.day);
                this.param.year = d.getFullYear();
                this.param.month = d.getMonth() + 1;
                HttpUtil.get('WorkFlow/List', this.param).success((r) => {
                    this.totalCount = r.total;
                    this.tabData = r.data;
                })
            },
            showDetail(row) {
                this.detailFormVisible = true;
                this.form = {
                    wf_eventName: row.wf_eventName,
                    wf_objType: row.wf_objType,
                    fromName: row.fromName,
                    toName: row.toName,
                    wf_processmsg: row.wf_processmsg,
                    wf_reason: row.wf_reason,
                    img: row.img,
                }
                if (this.form.img != null)
                    this.form.img = 'http://iot.hzcando.com:10004' + this.form.img;
            }
        },
        created: function () {
            this.headers = {
                uid: SiteConfig.account.uId,
                token: SiteConfig.account.accessToken
            };
            this.day = TimeUtil.convertToString(new Date()).substr(0, 7);
        },
        mounted: function () {
            this.tooltip = true;
        }
    });


</script>

</body>
</html>

